<script>
import Avatar from '../Avatar';
import Menu from './Menu';
import Contact from './Contact';

export default {
  name: 'SiteAside',
  components: {
    Avatar,
    Menu,
    Contact
  },

}
</script>



<template>
  <div class="siteAside-contaier">
    <div class="siteAside-picture">
      <Avatar :url="require('../../assets/qingzhou.png')"></Avatar>
      <span>我的个人空间</span>
    </div>
    <div class="siteAside-menu">
      <Menu></Menu>
    </div>
    <div class="siteAside-contact">
      <Contact></Contact>
    </div>
  </div>
</template>



<style lang='less' scoped>
@import '~@/styles/var.less';

.siteAside-contaier {
  width: 100%;
  height: 100%;
  background-color: @dark;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;

  .siteAside-picture {
    flex: 1;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    span {
      font-size: 20px;
      font-weight: 700;
      color: #fff;
      margin-top: 10px;
    }
  }

  .siteAside-menu {
    flex: 2;
    margin-top: 30px;
  }

  .siteAside-contact {
    flex: 2;
    margin-left: 10px;
  }
}
</style>